<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <title>学生信息管理系统</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
  <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
  <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
  <script src="${pageContext.request.contextPath}/layui/common.js"></script>

</head>
<body>
<table class="layui-table" lay-data="{url:'${pageContext.request.contextPath}/teacher/mark/list', page:true, id:'job', toolbar: '#toolbar', limits: [20, 40]}" lay-filter="job">
  <thead>
  <tr>
    <th lay-data="{field:'', type: 'checkbox', width:'3%'}">全选/取消</th>
    <th lay-data="{field:'stuId', width:'15%'}">学号</th>
    <th lay-data="{field:'name', width:'20%'}">姓名</th>
    <th lay-data="{field:'courseId', width:'10%'}">课程号</th>
    <th lay-data="{field:'courseName', width:'20%'}">课程名</th>
    <th lay-data="{field:'mark', width:'8%'}">成绩</th>
    <th lay-data="{field:'credit', width:'13%'}">学分</th>
    <th lay-data="{field:'', toolbar: '#barDemo'}">操作</th>
  </tr>
  </thead>
</table>


<script type="text/html" id="barDemo">
  <button class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit layui-font-12"></i>编辑</button>
  <button class="layui-btn layui-btn-danger layui-btn-xs " lay-event="del"><i class="layui-icon layui-icon-delete layui-font-12"></i>删除</button>
</script>

<script type="text/html" id="toolbar">
    <button type="button" class="layui-btn" lay-event="add"><i class="layui-icon layui-icon-addition"></i>添加成绩</button>
    <button type="button" class="layui-btn" lay-event="batch-remove"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
    <div class="layui-input-inline" style="width: 1250px; ">
      <input type="text" name="sno" placeholder="请输入学生学号" id="search-text-1"
             class="layui-input" style="width: 400px;display: inline-block;vertical-align: top">

      <input type="text" name="courseName" placeholder="请输入课程名称" id="search-text-2"
             class="layui-input" style="width: 400px;display: inline-block;vertical-align: top">
      <button type="button" class="layui-btn" lay-event="search"><i class="layui-icon layui-icon-search"></i>搜索
      </button>
    </div>
</script>

<script>
  layui.use("table" , function() {
    let table = layui.table ;
    let $ = layui.jquery;
    // 给 table 的 toolbar 中定义的 按钮 绑定单击事件
    table.on("toolbar(job)", function(obj) {
      // 获取 单击的按钮类型, 是否为 lay-event="add"
      if (obj.event === 'add') {
        // 弹出添加部门的窗口
        let index = layer.open({
          type: 2,  // iframe 窗口
          title: this.innerHTML ,  // 弹出窗口的标题
          content: ['${pageContext.request.contextPath}/teacher/mark/add', 'no'] , // iframe 的 url, no 代表不产生滚动条
          area: ['700px', '300px'] ,   // 弹出层的宽高
          btn: [ "保存" , "关闭" ] ,
          btn1: function(index, layero) {
            // 关闭 弹出层
            $("iframe", layero)[0].contentWindow.layui.form.submit()
            return false ; // 阻止默认行为,关闭窗口
          }
        })
      }else if (obj.event === "batch-remove") {
        // 批量删除 、获取 复选框选中的所有数据
        let checkStatus = table.checkStatus('job');
        let ids = checkStatus.data.map(d => d.id)
        if (ids.length == 0) {
          layer.msg("请至少勾选一个要删除的成绩");
          return;
        }
        layer.confirm('您确定要删除选择的所有学生的成绩吗？', {icon: 3, title: '提示'}, function (index) {
          axios.delete("/teacher/mark/batch/remove", {data: ids}).then(ret => {
            if (ret.data.status) {
              layer.close(index);
              layer.msg("成绩信息删除成功")
              table.reload("job")
            }
          })
        });
      }else if (obj.event === "search") {
        // 获取搜索的数据
        let searchText = $("#search-text-1").val()
        let searchText2 = $("#search-text-2").val()
        table.reload("job", {where: {courseName: searchText2, sno: searchText}})
      }
    })

    // 给 table 表格中 每一列中的 编辑按钮绑定事件
    table.on("tool(job)", function(obj) {
      // 获取 单击的按钮类型, 是否为 lay-event="edit"
      if (obj.event === 'edit') {
        // 弹出添加部门的窗口
        let index = layer.open({
          type: 2,  // iframe 窗口
          title: this.innerHTML ,  // 弹出窗口的标题
          content: ['${pageContext.request.contextPath}/teacher/mark/modify' + obj.data.id, 'no'] , // iframe 的 url, no 代表不产生滚动条
          area: ['700px', '300px'] ,   // 弹出层的宽高
          btn: [ "保存" , "关闭" ] ,
          btn1: function(index, layero) {
            // 关闭 弹出层
            $("iframe", layero)[0].contentWindow.layui.form.submit()
            return false ; // 阻止默认行为,关闭窗口
          }
        })
      }else if (obj.event == "del") {
        layer.confirm('您确定要删除该成绩吗？', {icon: 3, title: '提示'}, function (index) {
          axios.delete("/teacher/mark/remove/" + obj.data.id).then(ret => {
            if (ret.data.status) {
              layer.close(index);
              layer.msg("成绩删除成功")
              table.reload("job")
            }
          })
        });
      }
    })
  })
</script>

</body>
</html>
